<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { NButton, NInput, NSelect, useMessage } from 'naive-ui'
import { homeStore } from '@/store'
import { SvgIcon } from '@/components/common'

const ms = useMessage()
const config = ref({
  model: [{ label: 'DALL·E 3', value: 'dall-e-3' }],
  quality: [{ label: '标准', value: 'standard' }, { label: '高清', value: 'hd' }],
  style: [{ label: '现实', value: 'vivid' }, { label: '自然', value: 'natural' }],
})
const st = ref({ isGo: false })
const f = ref({ size: '1024x1024', quality: 'hd', style: 'natural', prompt: '', model: 'dall-e-3', n: 1 })

const isDisabled = computed(() => {
  if (st.value.isGo)
    return true
  if (f.value.prompt.trim() == '')
    return true
  return false
})
const create = async () => {
  // const d= await gptFetch('/v1/embeddings',{
  // "input":  f.value.prompt,
  // "model": "text-embedding-ada-002"
  // });
  // mlog('test',d );
  // return ;
  const obj = {
    action: 'gpt.dall-e-3',
    data: f.value,
  }
  homeStore.setMyData({ act: 'draw', actData: obj })
  st.value.isGo = true
}
watch(() => homeStore.myData.act, (n) => {
  if (n == 'dallReload') {
    st.value.isGo = false
    f.value.prompt = ''
  }
  if (n == 'updateChat')
    st.value.isGo = false
})

const dimensionsList = computed(() => {
  if (f.value.model == 'dall-e-2') {
    return [{
      label: '1024px*1024px',
      value: '1024x1024',
    }, {
      label: '512px*512px',
      value: '512x512',
    }, {
      label: '256px*256px',
      value: '256x256',
    },
    ]
  }
  return [{
    label: '1024px*1024px',
    value: '1024x1024',
  }, {
    label: '1792px*1024px',
    value: '1792x1024',
  }, {
    label: '1024px*1792px',
    value: '1024x1792',
  },
  ]
})
watch(() => f.value.model, (n) => {
  f.value.size = '1024x1024'
})
</script>

<template>
  <section class="mb-4 flex justify-between items-center">
    <div>版本</div>
    <NSelect v-model:value="f.model" :options="config.model" size="small" class="!w-[70%]" :clearable="false" />
  </section>
  <section class="mb-4 flex justify-between items-center">
    <div>尺寸</div>
    <NSelect v-model:value="f.size" :options="dimensionsList" size="small" class="!w-[70%]" :clearable="false" />
  </section>
  <section class="mb-4 flex justify-between items-center">
    <div>质量</div>
    <NSelect v-model:value="f.quality" :options="config.quality" size="small" class="!w-[70%]" :clearable="false" />
  </section>
  <section class="mb-4 flex justify-between items-center">
    <div>风格</div>
    <NSelect v-model:value="f.style" :options="config.style" size="small" class="!w-[70%]" :clearable="false" />
  </section>
  <div class="mb-1">
    <NInput
      v-model:value="f.prompt" type="textarea" placeholder="提示词" round clearable maxlength="500" show-count
      :autosize="{ minRows: 3, maxRows: 10 }"
    />
  </div>

  <div class="mb-4 flex justify-end items-center">
    <div class="flex ">
      <NButton type="primary" :block="true" :disabled="isDisabled" @click="create()">
        <SvgIcon icon="mingcute:send-plane-fill" />

        生成图片
      </NButton>
    </div>
  </div>

  <ul class="pt-4">
    说明：
    <li>1 dall-e 是openAi提供的画图模型</li>
    <li>2 openAi的图片有时效性，请做好备份</li>
    <li>3 注意：1790px的图片价格是双倍</li>
  </ul>
</template>
